// mixin就是把js在一个地方写，如果组件有用到就使用
import {mapGetters, mapMutations, mapActions} from 'vuex'
// 播放模式的值
import {playMode} from 'common/js/config'
import {shuffle} from 'common/js/util'

export const playlistMixin = {
  computed: {
    ...mapGetters([
      'playlist'
    ])
  },
  mounted () {
    this.handlePlaylist(this.playlist)
  },
  activated () {
    this.handlePlaylist(this.playlist)
  },
  watch: {
    playlist (newVal) {
      this.handlePlaylist(newVal)
    }
  },
  methods: {
    handlePlaylist () {
      throw new Error('components must implement handlePlaylist method')
    }
  }
}

// player和playlist组件的复用逻辑
export const playerMixin = {
  computed: {
    // 播放模式样式
    iconMode () {
      // 判断输出三种可能的播放模式
      return this.mode === playMode.sequence ? 'icon-sequence' : this.mode === playMode.loop ? 'icon-loop' : 'icon-random'
    },
    ...mapGetters([
      // 播放列表
      'sequenceList',
      // 播放的具体哪一项
      'currentSong',
      // 播放列表
      'playlist',
      // 播放模式
      'mode',
      // 收藏列表
      'favoriteList'
    ])
  },
  methods: {
    // 点击播放模式样式的元素
    // 以及改变歌曲列表排序
    changeMode () {
      const mode = (this.mode + 1) % 3
      this.setPlayMode(mode)
      let list = null
      if (mode === playMode.random) {
        list = shuffle(this.sequenceList)
      } else {
        list = this.sequenceList
      }
      this.resetCurrentIndex(list)
      this.setPlaylist(list)
    },
    resetCurrentIndex (list) {
      let index = list.findIndex((item) => {
        return item.id === this.currentSong.id
      })
      this.setCurrentIndex(index)
    },
    getFavoriteIcon (song) {
      if (this.isFavorite(song)) {
        return 'icon-favorite'
      }
      return 'icon-not-favorite'
    },
    toggleFavorite (song) {
      if (this.isFavorite(song)) {
        this.deleteFavoriteList(song)
      } else {
        this.saveFavoriteList(song)
      }
    },
    isFavorite (song) {
      const index = this.favoriteList.findIndex((item) => {
        return item.id === song.id
      })
      return index > -1
    },
    ...mapMutations({
      // 播放器打开与否的数据
      setPlayingStart: 'SET_PLAYING_STATE',
      // 歌曲播放的索引
      setCurrentIndex: 'SET_CURRENT_INDEX',
      // 播放模式
      setPlayMode: 'SET_PLAY_MODE',
      // 播放顺序
      setPlaylist: 'SET_PLAYLIST'
    }),
    ...mapActions([
      'saveFavoriteList',
      'deleteFavoriteList'
    ])
  }
}

// 搜索组件复用代码
export const searchMixin = {
  data () {
    return {
      query: '',
      // 给刷新的时间
      refreshDelay: 100
    }
  },
  computed: {
    ...mapGetters([
      // 保存点击歌曲，本地存储
      'searchHistory'
    ])
  },
  methods: {
    // 回调函数，这个是给手机上面的效果
    blurInput () {
      this.$refs.searchBox.blur()
    },
    // 存储被点击的元素在vuex里面
    saveSearch () {
      // 调用自定义的actions函数，来修改state.saveSearchHistory
      this.saveSearchHistory(this.query)
    },
    // 接收子组件传递的参数
    onQueryChange (query) {
      this.query = query
    },
    // 点击热门搜索内容把内容传递到搜索框里面
    addQuery (query) {
      // 调用search-box组件的setQuery自定义方法
      this.$refs.searchBox.setQuery(query)
    },
    ...mapActions([
      // 保存点击歌曲，本地存储
      'saveSearchHistory',
      // 删除点击歌曲，在本地存储
      'deleteSearchHistory'
    ])
  }
}
